<template>
  <div>
    <h4 style="margin-bottom: 15px">
      1# 测试题目 <i class="el-icon-question"></i>
    </h4>
    <el-checkbox-group v-model="checkList">
      <div v-for="(item, index) in randList" :key="index">
        <el-checkbox label="A)测试选项"></el-checkbox>
      </div>
    </el-checkbox-group>
    <el-button-group>
      <el-button type="success" size="mini" icon="el-icon-arrow-left"
        >上一题</el-button
      >
      <el-button type="success" size="mini"
        >下一题<i class="el-icon-arrow-right el-icon--right"></i
      ></el-button>
    </el-button-group>
    <!-- {{ renderList }} -->
  </div>
</template>

<script>
import { mapActions, mapState } from "vuex";
export default {
  data() {
    return {
      checkList: [],
      pageSize: 20,
    };
  },
  mounted() {
    this.getRondList({ pageSize: this.pageSize });
  },
  methods: {
    ...mapActions("test", ["getRondList"]),
  },
  computed: {
    ...mapState("test", ["randList"]),
    renderList() {
      return this.randList.map((item) => {
        return {
          ...item,
          options: JSON.parse(item.options),
          answers: JSON.parse(item.answers).join(""),
        };
        // console.log(JSON.parse(item.options))
      });
    },
  },
};
</script>

<style scoped>
.el-checkbox-group > div {
  margin-bottom: 15px;
}

.el-icon-question {
  cursor: pointer;
}
</style>